import {createSlice, PayloadAction} from '@reduxjs/toolkit';
import {DatePickerStepType} from '@/components/Landscape';
import { RESET_ALL_STATE } from '../actions/resetActions';

export interface ColorItem {
  color: string;
  title: string;
  visible: boolean;
}

export interface LandscapeColorsState {
  colors: ColorItem[];
  selected: DatePickerStepType;
}
export const colors = [
  '#FF891F',
  '#13C773',
  '#A1ECCE',
  '#F74A4B',
  '#FFC91F',
  '#F6DB87',
];
const initialState: LandscapeColorsState = {
  colors: [],
  selected: 'day',
};

const landscapeColorsSlice = createSlice({
  name: 'landscapeColors',
  initialState,
  reducers: {
    setColors(state, action: PayloadAction<ColorItem[]>) {
      state.colors = action.payload;
    },
    toggleColorVisible(state, action: PayloadAction<string>) {
      state.colors = state.colors.map(item =>
        item.title === action.payload
          ? {...item, visible: !item.visible}
          : item,
      );
    },
    setSelected(state, action: PayloadAction<DatePickerStepType>) {
      state.selected = action.payload;
    },
    // 重置图表颜色状态
    resetLandscapeColorsState(state) {
      state.colors = [];
      state.selected = 'day';
    },
  },
  extraReducers: (builder) => {
    builder.addCase(RESET_ALL_STATE, (state) => {
      // 重置到初始状态
      Object.assign(state, initialState);
    });
  },
});

export const {setColors, toggleColorVisible, setSelected, resetLandscapeColorsState} =
  landscapeColorsSlice.actions;
export default landscapeColorsSlice.reducer;
